<script setup lang="ts">
import * as Cesium from "cesium";
import { onMounted, defineExpose, onBeforeUnmount, defineEmits } from "vue";
import { useEarthStore } from "../stores/earthObj";
import { storeToRefs } from "pinia";

let emits = defineEmits(["EarthLoadFinsh"]);
let store = useEarthStore();
const { initViewer } = storeToRefs(store);

Cesium.Ion.defaultAccessToken = window["GVConfig"]?.token || "";
let viewer: any;

onMounted(() => {
  init();
});

onBeforeUnmount(() => {
  let viewer = store.getViewer();
  if (!viewer.isDestroyed()) viewer.destroy();
  store.initViewer(null,true); 
});

const init = () => {
  viewer = new Cesium.Viewer("EarthContainer", {
    // 使用默认的影像图层和地形图层
    homeButton: false,
    geocoder: false,
    vrButton: false,
    timeline: true,
    navigationHelpButton: false,
    fullscreenButton: false,
    infoBox: false,
    selectionIndicator: false,
    sceneModePicker: false,
    animation: false,
    scene3DOnly: false,
  });

  // 关闭logo图标
  viewer.cesiumWidget.creditContainer.style.display = "none";

  // 使用pinia中的方法，给地图图层对象初始化
  store.initViewer(viewer);

  emits("EarthLoadFinsh", viewer);
};
</script>
<template>
  <div id="EarthContainer"></div>
</template>
<style scoped>
#EarthContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
